<template>
	<view>
	<uni-segmented-control :current="current" :values="segmentsProductNameVo"
	 styleType="text" @clickItem="onClickItem" 
	>
			  
	</uni-segmented-control>
 
 <uni-card v-for="(item,index) in deviceDetailsVo">
 		 <uni-row>
 			 <uni-col  style ="width: 85%;">
 				 <uni-row>
 				 			  <uni-col style = "width: 30%;">设备编号:</uni-col>
 				 			  <uni-col style = "width: 70%;">{{item.devId}}</uni-col>
 				 </uni-row>
 				 <uni-row>
 				 			  <uni-col style = "width: 30%;">设备名称:</uni-col>
 				 			  <uni-col style = "width: 70%;">{{item.name}}</uni-col>
 				 </uni-row>
 				 <uni-row>
 				 			  <uni-col style = "width: 30%;">是否在线:</uni-col>
 				 			  <uni-col style = "width: 70%;">
							 <p v-if="item.online">在线</p>
							 <p v-else>离线</p> 
							  </uni-col>
 				 </uni-row>
 				 
 				 <uni-row>
 				 			  <uni-col style = "width: 30%;">是否故障:</uni-col>
 				 			  <uni-col style = "width: 70%;">
								  <p v-if="item.isFault">故障</p>
							      <p v-else>正常</p> 
							  </uni-col>
 				 </uni-row>
 				 
 				
 			 </uni-col>
 			 <uni-col style ="width: 15%; "  >
 			
 				  <image src="../../static/images/project/ic_dev.png" style="width: 60rpx;
 				   height: 60rpx; " @click = "devOperation(index)" ></image>
 				
 			 </uni-col>
 		 </uni-row> 			  
 </uni-card>
 
 </view>
</template>

<script>
  import {takeDeviceVO,takeDeviceResult} from "@/api/iot/device";
	
  export default {
    data() {
      return {
	   //后台获取得视图对象	  
       wxProductSegments:[],
	   wxDeviceDetails:[],
	   segmentsElement:{
		   productId : 0,
		   name:"",
	   },
	   deviceElement:{
		     id : 0,
		     devId: "",
             productId:0,
             name:"",
             online:false,
             isFault:false,
	   },
	   //分段锁展示得对象
	   current:0,
	   segmentsProductNameVo:[],
	   segmentsProductIdVo:[],
	   //设备展示数据
	   deviceDetailsVo:[],
	   productId : 0,
	   productName : "",
	   
	   
      }
    },
  
    onLoad(event) {
		
      var projectName = event.projectName;
	  var projectId = event.projectId;
	  
      if (projectName) {
        uni.setNavigationBarTitle({
          title: projectName
        });
      }
	  
	  this.initDeviceUI(projectId)
    },
	
	methods:{
		initDeviceUI(projectid){
			takeDeviceVO(projectid).then(res => {
				this.data = res.data;
				this.wxDeviceDetails = res.data.wxDeviceDetails;
				this.wxProductSegments = res.data.wxProductSegments;
				if(this.wxDeviceDetails.length == 0) {
			    	alert("该项目未添加设备!");
				} else {
					this.segmentsProductNameVo = [];
					this.segmentsProductIdVo = [];
					for(var i = 0; i < this.wxProductSegments.length; i++){
					    var productEle = this.wxProductSegments[i];
						this.segmentsProductNameVo[i] = productEle.name;
						this.segmentsProductIdVo[i] = productEle.productId;
					}
					this.productId  = this.segmentsProductIdVo[0];
					this.productName  = this.segmentsProductNameVo[0];
					this.displayDeviceInProduct();
				}
						
			});
		},
		//切换时加载数据源
		onClickItem(selectItem){
			 var index =  selectItem.currentIndex;
			 this.productId  = this.segmentsProductIdVo[index];
			 this.productName  = this.segmentsProductNameVo[index];
			 this.displayDeviceInProduct();
		},
		//展示不同状态下得项目数据
		displayDeviceInProduct() {
			this.deviceDetailsVo = [];
			var j = 0 ;
			for(var i = 0; i < this.wxDeviceDetails.length; i++) {
				var devProductId = this.wxDeviceDetails[i].productId;
				if(this.productId == devProductId) {
					var temp = this.wxDeviceDetails[i];
					this.deviceDetailsVo[j] = temp;
					j++;
				 }
			} 
			
		},
		devOperation(index){
			
		   var deviceItem =	 this.deviceDetailsVo[index];
		 
		   var devId = deviceItem.devId;
		   
		   var devName = deviceItem.name;
		
		   this.$tab.navigateTo(`/pages/iot/cmd?
		   productId=${this.productId}&productName=${this.productName}
		   &devId=${devId}&devName=${devName}`)
			   
		}
		
	}
	
	
  }
</script>
